<template>
	<div id="mon">
		<img id="mon-top" :src='$store.state.url+"/img/lfximg/8.jpg"'>
		<div id="mon-father" :style="{backgroundImage:url}">
			<div id="mon-first">
				<transition name="fade">
					<img v-if="flag" class="mon-first-img" :src="$store.state.url+'/img/lfximg/sg.png'">
				</transition>
			</div>
			<div id="mon-second">
				<transition name="box">
					<img v-if="flag2" class="mon-first-img1" :src="$store.state.url+'/img/lfximg/9.png'">
				</transition>
			</div>
			<div id="mon-three">
				<transition name="three">
					<div class="mon-three-box" v-if="flag3">
						<img class="mon-first-img2" :src="$store.state.url+'/img/lfximg/10.png'">
						<img class="mon-first-img22" :src="$store.state.url+'/img/lfximg/11.png'" />
						<img class="mon-first-img23" :src="$store.state.url+'/img/lfximg/16.png'" />
					</div>
				</transition>
			</div>
			<div id="mon-four">
				<transition name="four">
					<div class="mon-four-box" v-if="flag4">
						<img class="mon-first-img3" :src="$store.state.url+'/img/lfximg/12.png'">
						<img class="mon-first-img32" :src="$store.state.url+'/img/lfximg/13.png'" />
						<img class="mon-first-img33" :src="$store.state.url+'/img/lfximg/18.png'" />
					</div>
				</transition>
			</div>
		</div>
		<div id="mon-father-borther" :style="{backgroundImage:url1}">
			<div id="mon-father-borther-first">
				<transition name="fade1">
					<img v-if="flag5" class="mon-father-borther-firstimg" :src="$store.state.url+'/img/lfximg/14.png'">
				</transition>
			</div>
			<div id="mon-father-borther-first2">
				<transition name="fade2">
					<img v-if="flag6" class="mon-father-borther-firstimg1" :src="$store.state.url+'/img/lfximg/15.png'">
				</transition>
			</div>
			<div id="mon-father-borther-first3">
				<transition name="fade3">
					<img v-if="flag7" class="mon-father-borther-firstimg2" :src="$store.state.url+'/img/lfximg/17.png'">
				</transition>
			</div>
		</div>
		<!-- <div id="bottom" style="width: 100%; height: 600px;background-color: blue;">
			
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				url: "",
				url1: "",
				flag: false,
				flag2: false,
				flag3: false,
				flag4: false,
				flag5: false,
				flag6: false,
				flag7: false,

			}
		},
		mounted() {
			this.url = `url(${this.$store.state.url + "/img/lfximg/bj1.png"})`;
			this.url1 = `url(${this.$store.state.url + "/img/lfximg/bj2.png"})`;
			window.addEventListener("scroll", this.fn)
		},

		methods: {
			fn() {
				let res = document.documentElement.scrollTop || document.body.scrollTop
				console.log(res)
				if (res >= 300) {
					this.flag = true
				}
				if (res >= 500) {
					this.flag2 = true
				}
				if (res >= 1000) {
					this.flag3 = true
				}
				if (res >= 1500) {
					this.flag4 = true
				}
				if (res >= 2300) {
					this.flag5 = true
				}
				if (res >= 2900) {
					this.flag6 = true
				}
				if (res >= 3400) {
					this.flag7 = true
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	#mon-top {
		margin-top: 120px;
	}

	.fade-enter,
	.fade-leave {
		opacity: 0;
		margin-left: 100px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 2s ease-in-out;
	}

	.box-enter,
	.box-leave {
		opacity: 0;
		margin-top: 300px;
	}

	.box-enter-active,
	.box-leave-active {
		transition: all 2s ease-in-out;
	}

	.three-enter,
	.three-leave {
		opacity: 0;
		margin-left: -300px;
	}

	.three-enter-active,
	.three-leave-active {
		transition: all 2s ease-in-out;
	}

	.four-enter,
	.four-leave {
		opacity: 0;
		margin-left: -300px;
	}

	.four-enter-active,
	.four-leave-active {
		transition: all 2s ease-in-out;
	}

	.fade1-enter,
	.fade1-leave {
		opacity: 0;
		margin-left: -300px;
	}

	.fade1-enter-active,
	.fade1-leave-active {
		transition: all 2s ease-in-out;
	}

	.fade2-enter,
	.fade2-leave {
		opacity: 0;
		margin-left: -300px;
	}

	.fade2-enter-active,
	.fade2-leave-active {
		transition: all 2s ease-in-out;
	}

	.fade3-enter,
	.fade3-leave {
		opacity: 0;
		margin-left: -300px;
	}

	.fade3-enter-active,
	.fade3-leave-active {
		transition: all 2s ease-in-out;
	}

	#mon-father {
		width: 100%;
		border-bottom: 2px solid white;
		padding-bottom: 20px;

		#mon-firstSon {
			width: 913px;
		}

		#mon-first {
			width: 1334px;
			margin: 0 auto;
			height: 227px;
			position: relative;
			padding: 40px 0;

			.mon-first-img {
				display: block;
				width: 421px;
				height: 227px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		#mon-second {
			width: 1334px;
			height: 636px;
			margin: 0 auto;
		}

		#mon-three {
			width: 1334px;
			height: 636px;
			margin: 0 auto;

			.mon-three-box {
				width: 1334px;
				height: 636px;
				position: relative;

				.mon-first-img22 {
					display: block;
					left: 776px;
					bottom: 269px;
					position: absolute;
				}

				.mon-first-img23 {
					display: block;
					left: 776px;
					bottom: 192px;
					position: absolute;
					cursor: pointer;
				}
			}

		}

		#mon-four {
			width: 1334px;
			height: 636px;;
			margin: 0 auto;

			.mon-four-box {
				width: 1334px;
				height: 636px;
				position: relative;

				.mon-first-img32 {
					display: block;
					left: 130px;
					bottom: 225px;
					position: absolute;
				}

				.mon-first-img33 {
					display: block;
					left: 130px;
					bottom: 156px;
					position: absolute;
					cursor: pointer;
				}
			}
		}
	}

	#mon-father-borther {
		width: 100%;
		// height: 100px;
		background-color: red;

		#mon-father-borther-first {
			width: 1142px;
			padding: 20px 0 100px 0;
			margin: 0 auto;

			.mon-father-borther-firstimg {
				width: 1142px;
				height: 419px;
			}
		}

		#mon-father-borther-first2 {
			width: 1142px;
			padding: 20px 0 100px 0;
			margin: 0 auto;

			.mon-father-borther-firstimg1 {
				width: 1142px;
				height: 419px;
			}
		}

		#mon-father-borther-first3 {
			width: 1142px;
			padding: 20px 0 100px 0;
			margin: 0 auto;
		}
	}
</style>
